<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>definePrototype</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click.stop="change">change</button>
        <p v-for="item in arr">{{item}}</p>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                message:'Hello vue',
                arr:[1,2,3],
            },
            methods:{
                change(){
                    // 在Vue 里不能用下标去改数组。 因为监控不到数组的变化。
                    // this.arr[0] = 10;

                    // 在 Vue 里要用数组的方法去改变 框架才能监控到数组的变化 。  *********
                    // this.arr.splice(0,1,10);

                    // 用 length 也不能改
                    // this.arr.length = 1;

                    // 只能去用方法， 或者重写数组 才能做到 响应。
                    // this.arr.splice(1);  或者 去重写数组.  

                }
            }
        })
    </script>
</body>
</html>